import React from 'react';
import './css/teacher.less';
import './css/download.less'
import {BasePic,teacherUrl1,teacherUrl2} from '../../utils/basic'
import Footer from './footer'
import Modal from '../components/ModalCopy'
class Teacher extends React.Component{
  state={
    isShow:false,
    isSrc:''
  }
  isBig(e){
    let length = e.target.src.indexOf('@')
    let str = `${e.target.src.slice(0,length)}_yuan@2x.png`;
    this.setState({
      isShow:true,
      isSrc:str
    })
  }
    render(){
        return (
            <div className="download-content teaher-content banner-margin">
        <div className="download-banner">
            <div className="banner-img col-xs-12">
              <img src={BasePic +'teacher-banner.png'} style={{width:"100%",height:"100%"}}  alt=""/>
            </div>
        </div>
        <div className="teacher-select">
          <div className="teacher-content">
              <div className="teacher-ways">
                <div className="teacher-ways-kids">
                  <div className="kids-left col-md-2 col-xs-12">
                    <img src={BasePic +'kids-img-one.png'} alt=''/>
                  </div>
                  <div className="col-md-5 col-xs-12 kids-center">
                    <div className="kids-title">
                      <div className="kids-h3">4-6岁</div>
                      <p>美国幼儿园 (PreK/K)</p>
                    </div>
                    <div className="kids-eng">激发英语兴趣 自信开口表达</div>
                  </div>
                  <div className="col-md-5 col-xs-12 kids-right">
                    <div className="title-ways">教学方法 <span></span></div>
                    <p>Phonics自然拼读教学法<br/>TPR全身反应教学法</p>
                    <div className="teacher-book">
                      <img src={require('../../images/teacher/icon-book.png')} alt=''/>
                    美国当地幼儿园教材</div>
                  </div>
                </div>
                <div className="teacher-ways-imgs">
                  <div>
                    <ul className="teacher-ways-ul">
                    <div style={{width:"200px"}}>
                      <li>
                        <div className="teacher-cover">
                          <img alt='' src={teacherUrl1+ 'Lv.1_1@2x.png'} onClick={(e)=>{this.isBig(e)}}/>
                        </div>
                      </li>
                      <li>
                        <div className="teacher-cover">
                          <img alt='' src={teacherUrl1+ 'Lv.1_2@2x.png'} onClick={(e)=>{this.isBig(e)}}/>
                        </div>
                      </li>
                      <li>
                        <div className="teacher-cover">
                          <img alt='' src={teacherUrl1+ 'Lv.1_3@2x.png'} onClick={(e)=>{this.isBig(e)}}/>
                        </div>
                      </li>
                      <li>
                        <div className="teacher-cover">
                          <img alt='' src={teacherUrl1+ 'Lv.1_4@2x.png'} onClick={(e)=>{this.isBig(e)}}/>
                        </div>
                      </li>
                      <li>
                        <div className="teacher-cover">
                          <img alt='' src={teacherUrl1+ 'Lv.1_5@2x.png'} onClick={(e)=>{this.isBig(e)}}/>
                        </div>
                      </li>
                      <li>
                        <div className="teacher-cover">
                          <img alt='' src={teacherUrl1+ 'Lv.1_6@2x.png'} onClick={(e)=>{this.isBig(e)}}/>
                        </div>
                      </li>
                      <li>
                        <div className="teacher-cover">
                          <img alt='' src={teacherUrl1+ 'Lv.1_7@2x.png'} onClick={(e)=>{this.isBig(e)}}/>
                        </div>
                      </li>
                      <li>
                        <div className="teacher-cover">
                          <img alt='' src={teacherUrl1+ 'Lv.1_8@2x.png'} onClick={(e)=>{this.isBig(e)}}/>
                        </div>
                      </li>
                      <div className="text-teacher"><span>Lv 1</span>教材预览</div>
                      </div>
                    </ul>
                  </div>
                </div>
              </div>
              <div className="teacher-ways">
                <div className="teacher-ways-kids">
                  <div className="kids-left col-md-2 col-xs-12">
                    <img src={BasePic +'kids-img-two.png'} alt=''/>
                  </div>
                  <div className="col-md-5 col-xs-12 kids-center">
                    <div className="kids-title" style={{background:"#7185FD"}}>
                      <div className="kids-h3">7-9岁</div>
                      <p>美国幼儿园 (PreK/K)</p>
                    </div>
                    <div className="kids-eng" style={{color:"#7185FD"}}>提升英语思维 流利沟通表达</div>
                  </div>
                  <div className="col-md-5 col-xs-12 kids-right">
                    <div className="title-ways">教学方法 <span></span></div>
                    <p>CLIL内容和语言相融合教学法Peer Instruction 合作式教学法</p>
                    <div className="teacher-book">
                      <img src={require('../../images/teacher/icon-book.png')} alt=''/>
                      美国小学原版语文教材</div>
                  </div>
                </div>
                <div className="teacher-ways-imgs">
                  <div>
                    <ul className="teacher-ways-ul">
                      <li>
                        <div className="teacher-cover">
                          <img alt='' src={teacherUrl2+ 'Lv.2_1@2x.png'} onClick={(e)=>{this.isBig(e)}}/>
                        </div>
                      </li>
                      <li>
                        <div className="teacher-cover">
                          <img alt='' src={teacherUrl2+ 'Lv.2_2@2x.png'} onClick={(e)=>{this.isBig(e)}}/>
                        </div>
                      </li>
                      <li>
                        <div className="teacher-cover">
                          <img alt='' src={teacherUrl2+ 'Lv.2_3@2x.png'} onClick={(e)=>{this.isBig(e)}}/>
                        </div>
                      </li>
                      <li>
                        <div className="teacher-cover">
                          <img alt='' src={teacherUrl2+ 'Lv.2_4@2x.png'} onClick={(e)=>{this.isBig(e)}}/>
                        </div>
                      </li>
                      <li>
                        <div className="teacher-cover">
                          <img alt='' src={teacherUrl2+ 'Lv.2_5@2x.png'} onClick={(e)=>{this.isBig(e)}}/>
                        </div>
                      </li>
                      <li>
                        <div className="teacher-cover">
                          <img alt='' src={teacherUrl2+ 'Lv.2_6@2x.png'} onClick={(e)=>{this.isBig(e)}}/>
                        </div>
                      </li>
                      <li>
                        <div className="teacher-cover">
                          <img alt='' src={teacherUrl2+ 'Lv.2_7@2x.png'} onClick={(e)=>{this.isBig(e)}}/>
                        </div>
                      </li>
                      <li>
                        <div className="teacher-cover">
                          <img alt='' src={teacherUrl2+ 'Lv.2_8@2x.png'} onClick={(e)=>{this.isBig(e)}}/>
                        </div>
                      </li>
                      <div className="text-teacher"><span style={{background:"#7185FD"}}>Lv 2</span>教材预览</div>
                    </ul>
                  </div>
                </div>
              </div>
          </div>
          <div className="teacher-model" style={{marginTop:"110px"}}>
              <h3>翻转课堂学习模式</h3>
              <p>养成好习惯，学习更高效</p>
              <div className="teacher-model-dl">
                <div className="teacher-model-left col-md-6 col-xs-12" style={{padding:0}}>
                    <div style={{marginLeft:'60px'}}>
                      <span className="bigNum">1</span>课前预习
                      <i><img alt='' src={require('../../images/teacher/time.png')}/></i>
                      <span>8-10分钟</span>
                    </div>
                    <p style={{width:"625px",paddingLeft:"160px"}}>有趣的在线互动游戏，带孩子提前了解重点单词和所学主题，让课堂时间更加高效。</p>
                </div>
                <div className="teacher-model-right col-md-5 col-xs-12" style={{padding:0}}>
                  <img alt='' src={BasePic +'before.png'}/>
                </div>
              </div>
              <div className="teacher-model-dl">
                <div className="teacher-model-right col-md-6 col-xs-12" style={{width:"500px",height:"218px",padding:0,marginRight:'65px'}}>
                  <img alt='' src={BasePic +'center.png'}/>
                </div>
                <div className="teacher-model-left col-md-6 col-xs-12" style={{padding:0,margin:0}}>
                    <div>
                      <span className="bigNum">2</span>北美外教在线小班课堂
                      <i><img alt='' src={require('../../images/teacher/time.png')}/></i>
                      <span>40分钟</span>
                    </div>
                    <p style={{width:"564px",paddingLeft:"40px"}}>纯正美式发音，提供“母语式”语言环境；小班合作式教学，在合作和竞争中激发孩子兴趣，提升成就感，促进沟通力。</p>
                </div>
                
              </div>
              <div className="teacher-model-dl">
                <div className="teacher-model-left col-md-6 col-xs-12" style={{padding:0}}>
                    <div style={{marginLeft:'60px'}}>
                      <span className="bigNum">3</span>家庭作业
                      <i><img alt='' src={require('../../images/teacher/time.png')}/></i>
                      <span>8-10分钟</span>
                    </div>
                    <p style={{width:"625px",paddingLeft:"160px"}}>有趣的在线互动复习，在游戏中巩固和应用当天所学知识。</p>
                </div>
                <div className="teacher-model-right col-md-6 col-xs-12" style={{padding:0}}>
                  <img alt='' src={BasePic +'after.png'}/>
                </div>
              </div>
          </div>
        </div>
        <Footer/>
        {
        this.state.isShow?
        <Modal>
          <div className="big-close-btn">
            <button type="button" className="close btn-close-x" style={{fontSize:"38px",color:"#fff",opacity:1,margin:"30px 30px 0 0"}} aria-label="Close"  onClick={()=>{
                this.setState({
                    isShow:!this.state.isShow
                })
            }}><img src={require('../../images/teacher/icon_close.png')} style={{width:"22px",height:"22px"}} alt=""/></button>
            <img src={this.state.isSrc} alt='' className="bigClose-img" style={{width:"800px",height:"600px"}}/>
          </div>
        </Modal>:''
        }
      </div>
        );
    }
}
export default Teacher;